<template>
  <div class="d1">
    <!-- 顶部导航 -->
    <mt-header fixed class="heard" title="回收栏目" style="background: white">
      <router-link to="/" slot="left">
        <mt-button icon="back"> </mt-button>
      </router-link>
    </mt-header>

    <div class="input">
      <table></table>
      <div class="in1"><img src="/img/avater/1.png" />快速搜索您想要的机型</div>
      <!-- 顶部选项卡 -->
      <mt-navbar v-model="active" class="item">
        <mt-tab-item :id="item.id" v-for="(item, i) of first_type" :key="i">
          <p>{{ item.name }}</p>
        </mt-tab-item>
      </mt-navbar>
      <mt-tab-container>
        <mt-tab-container-item>
          <div>
            <div class="menu">
              <a
                href="#"
                tag="div"
                @click.prevent="getFirstPro"
                class="icon"
                :class="{ active2: active2 == 1 }"
                >推荐</a
              >
              <!-- 二级目录导航 -->
              <a
                href="#"
                @click.prevent="getSecondPro(item.id)"
                tag="div"
                class="icon"
                :class="{ active2: active2 == item.id }"
                v-for="(item, i) of secondcategory"
                :key="i"
                >{{ item.name }}
              </a>
            </div>
            <div class="content">
              <div class="z1">
                <router-link
                  :to="`/prospecs?proid=${item.id}&protitle=${item.name}&proprice=${item.prise}&propic=${item.photo_url}`"
                  class="d3"
                  v-for="(item, i) of first_type_pro"
                  :key="i"
                >
                  <div class="i1">
                    <img :src="`http://127.0.0.1:3000/${item.photo_url}`" />
                  </div>
                  <div class="s1">
                    <div>
                      <span>{{ item.name }}</span>
                    </div>
                    <div class="d2">
                      <span class="s11">回收均价：</span
                      ><span class="s22">￥{{ item.prise }}</span>
                    </div>
                  </div>
                </router-link>
              </div>
            </div>
          </div>
        </mt-tab-container-item>
      </mt-tab-container>
    </div>
  </div>
</template>
<style  scoped>
.d1 .item p {
  font-size: 18px;
}
.d1 .active2 {
  background: wheat;
}
.content {
  position: fixed;
  left: 10px;
  top: 156px;
  right: 0;
  bottom: 0;
  overflow: auto;
  margin-left: 85px;
}
.d1 .icon {
  display: block;
  color: #000;
  font-size: 14.5px;
  width: 80px;
  height: 60px;
  /* margin: 0px 10px 10px 0; */
  /* padding: 10px; */
  line-height: 60px;
  text-align: center;
}
.d1 .menu {
  /* margin: 10px; */
  position: fixed;
  left: 0px;
  top: 170px;
  right: 0;
  bottom: 0;
  overflow: auto;
  float: left;
  padding: 10px;
  background-color: #f5f5f5;
}
.d1 .mint-navbar .mint-tab-item.is-selected {
  border-bottom: 4px solid red;
  /* color: #26a2ff; */
  /* margin-bottom: -3px; */
}
.d1 .in1 img {
  height: 27px;
  padding-left: 10px;
}
.d1 .input {
  margin-top: 55px;
  background-color: #f5f5f5;
  /* height: 100%; */
}
.d1 .in1 {
  color: #bbb;
  height: 35px;
  border-radius: 20px;
  margin: 10px;
  background: white;
  /* text-align: center; */
  line-height: 35px;
}
.d1 .heard {
  background-color: #fff;
  color: black;
  font-size: 16px;
  height: 50px;
}
.z1 {
  border-radius: 10px;
  background: white;
  margin: 25px 5px 0 25px;
}

.d2 {
  margin-top: 10px;
}
.s11 {
  font-size: 13px;
}
.s22 {
  font-size: 16px;
  color: #f74444;
}
.s1 {
  font-size: 16px;
  margin-left: 22px;
}
.d3 {
  display: block;
  margin: 10px;
  width: 275px;
  height: 75px;
  display: flex;
  align-items: center;
  color: #000;
}
.i1 {
  width: 43px;
  height: 43px;
  margin-left: 10px;
}
.i1 img {
  width: 100%;
}
</style>
<script>
export default {
  data() {
    return {
      // 选中的一级类目
      active: "",
      active2: 1,
      // 一级类目
      first_type: [],
      secondcategory: [],
      first_type_pro: [],
    };
  },
  methods: {
    // 获取跳转后的查询字符串
    getQuery() {
      if (JSON.stringify(this.$route.query) != "{}") {
        this.active = Number(this.$route.query.id);
      } else {
        this.active = 1001;
      }
    },
    // 获取二级目录
    getSecondcategory() {
      // 获取二级目录
      this.axios
        .get("/products/secondcategory", {
          params: {
            sid: this.active,
          },
        })
        .then((res) => {
          var { results } = res.data;
          this.secondcategory = results;
        });
    },
    // 根据一级类目获取相应的商品
    getFirstPro() {
      this.active2 = 1;
      this.axios
        .get("/products/firstcategorypro", {
          params: {
            first_type_id: this.active,
          },
        })
        .then((res) => {
          this.first_type_pro = res.data;
        });
    },
    // 获取二级类目下的商品
    getSecondPro(second_type_id) {
      this.active2 = second_type_id;
      this.axios
        .get(`/products/secondcategorypro?second_type_id=${second_type_id}`)
        .then((res) => {
          this.first_type_pro = res.data;
        });
    },
  },
  mounted() {
    // 发送请求获取一级目录
    // 发送ajax获取一级类目
    this.axios.get("/products/firstcategory").then((res) => {
      this.first_type = res.data.results;
    });
    // 获取二级目录
    this.getSecondcategory();
    // 获取推荐商品
    // this.getPros(),
    // 渲染推荐列表
    this.getFirstPro();
    // 获取上一个页面传过来的查询字符串
    // 获取跳转后的查询字符串
    this.getQuery();
  },

  watch: {
    active() {
      this.active2 = 1;
      // 当一级类目发生变化以后，替换二级类目
      this.getSecondcategory();
      // 替换推荐的商品
      this.getFirstPro();
    },
  },
};
</script>